
        <!DOCTYPE html>
        <html>
        <head>
            <title>WebRTC Video & NumPy Data</title>
            <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        </head>
        <body>
            <h1>WebRTC Video Stream</h1>
            <video id="remoteVideo" autoplay playsinline controls></video>
            
            <h1>NumPy Data Display</h1>
            <div id="numpy-data">Waiting for data...</div>
            
            <script>
                const videoElement = document.getElementById('remoteVideo');
                const dataDisplay = document.getElementById('numpy-data');
                let peerConnection;
                let peerId;
                
                // 配置STUN服务器
                const config = {
                    iceServers: [
                        { urls: 'stun:stun.l.google.com:19302' }
                    ]
                };
                
                // 初始化WebRTC连接
                async function initWebRTC() {
                    try {
                        // 创建PeerConnection
                        peerConnection = new RTCPeerConnection(config);
                        
                        // 处理远程媒体流
                        peerConnection.ontrack = event => {
                            if (event.streams && event.streams[0]) {
                                videoElement.srcObject = event.streams[0];
                            }
                        };
                        
                        // 处理ICE候选
                        peerConnection.onicecandidate = event => {
                            if (event.candidate) {
                                // 发送ICE候选到服务端
                                fetch(`/candidate/${peerId}`, {
                                    method: 'POST',
                                    headers: { 'Content-Type': 'application/json' },
                                    body: JSON.stringify({ candidate: event.candidate })
                                });
                            }
                        };
                        
                        // 创建Offer
                        const offer = await peerConnection.createOffer();
                        await peerConnection.setLocalDescription(offer);
                        
                        // 发送Offer到服务端
                        const response = await fetch('/offer', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ offer: peerConnection.localDescription })
                        });
                        
                        const data = await response.json();
                        peerId = data.peer_id;
                        
                        // 开始轮询Answer
                        pollForAnswer();
                    } catch (error) {
                        console.error('Error initializing WebRTC:', error);
                    }
                }
                
                // 轮询服务端获取Answer
                async function pollForAnswer() {
                    try {
                        const response = await fetch(`/answer/${peerId}`);
                        const data = await response.json();
                        
                        if (data.answer) {
                            await peerConnection.setRemoteDescription(
                                new RTCSessionDescription(data.answer)
                            );
                            console.log('WebRTC connection established');
                        } else {
                            setTimeout(pollForAnswer, 1000);
                        }
                    } catch (error) {
                        console.error('Error polling for answer:', error);
                        setTimeout(pollForAnswer, 2000);
                    }
                }
                
                // 获取并显示NumPy数据
                async function fetchNumpyData() {
                    try {
                        const response = await fetch('/get_numpy_data');
                        const data = await response.json();
                        
                        if (data.length > 0) {
                            dataDisplay.textContent = `NumPy Data: [${data.map(d => d.toFixed(4)).join(', ')}]`;
                        }
                    } catch (error) {
                        console.error('Error fetching numpy data:', error);
                    }
                    
                    setTimeout(fetchNumpyData, 50); // 每50ms更新一次
                }
                
                // 初始化
                initWebRTC();
                fetchNumpyData();
            </script>
        </body>
        </html>
        